<template>
  <div class="xuan" ref="xz">
    <div v-for="item in xuan" :key="item.id" class="img" @mouseover="change(item.id)" @mouseout="change(item.id)" @click="onclick(item.text)"> 
        <img v-show="item.isBlue" :src="item.blueImg" alt="">
        <img v-show="!item.isBlue" :src="item.yellowImg" alt="">
        <p>{{ item.text }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref,onMounted,reactive} from 'vue'

interface typexuan{
    id:number,
    blueImg:string,
    yellowImg:string,
    text:string,
    isBlue:boolean
}

const xuan=reactive<Array<typexuan>>([
    {
        id:1,
        blueImg:'/src/assets/images/dingwei_nor.png',
        yellowImg:'/src/assets/images/dingwei_hov.png',
        text:'车辆定位导航系统',
        isBlue:true
    },
    {
        id:2,
        blueImg:'/src/assets/images/fenxi_nor.png',
        yellowImg:'/src/assets/images/fenxi_hov.png',
        text:'可视化作战平台',
        isBlue:true
    },
    {
        id:3,
        blueImg:'/src/assets/images/huaxiang_nor.png',
        yellowImg:'/src/assets/images/huaxiang_hov.png',
        text:'交通安全画像系统',
        isBlue:true
    },
    {
        id:4,
        blueImg:'/src/assets/images/che_nor.png',
        yellowImg:'/src/assets/images/che__hov.png',
        text:'重点车辆管理系统',
        isBlue:true
    },
    {
        id:5,
        blueImg:'/src/assets/images/jiankong_nor.png',
        yellowImg:'/src/assets/images/jiankong_hov.png',
        text:'交通态势监控系统',
        isBlue:true
    },
    {
        id:6,
        blueImg:'/src/assets/images/tingche_nor.png',
        yellowImg:'/src/assets/images/tingche_hov.png',
        text:'车辆停车监控系统',
        isBlue:true
    },
])
const xz=ref()

onMounted(()=>{

for(let a=0; a<xz.value.children.length; a++){
    xz.value.children[a].style['animation-delay']=`${-5-a*3.3}s,-${a*3.3}s,-${a*3.3}s`
}

})



const change=(id:number)=>{
    let obj=xuan.find(item=>item.id===id)
    obj.isBlue=!obj.isBlue
  // 移入暂停所有动画 
  for(let a=0; a < xz.value.children.length; a++){
    xz.value.children[a].style['animation-paly-state']=obj.isBlue ?'running':'paused'
  } 
}

const onclick=(text:string)=>{
    alert(text)
}




</script>

<style lang="scss" scoped>
@keyframes moveX{
    0% {
        left: -100px;
    }
    100% {
        left: 80%;
    }
}

@keyframes moveY{
    0% {
        top: 0px;
    }
    100%{
        top: 60%;
    }
}

@keyframes moveScale{
    0%{
        transform: scale(0.6);
    }
    50%{
        transform: scale(1);
    }
    100%{
        transform: scale(0.6);
    }
}
.xuan{
    margin-top: 80px;
    color: white;
    position: relative;
    height: 500px;
    .img{
        width: 200px;
        height: 200px;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        animation-name: moveX,moveY,moveScale;
        animation-duration:10s,10s,20s ;
        animation-iteration-count: infinite;
         animation-direction:alternate;
         animation-timing-function: cubic-bezier(0.36,0,0.64,1);
    }
}

</style>
